/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */
import {createAppContainer} from 'react-navigation'
import {createBottomTabNavigator,BottomTabBar} from 'react-navigation-tabs'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons'
import FontAwesome from 'react-native-vector-icons/FontAwesome'
import AntDesign from 'react-native-vector-icons/AntDesign'
import React, {Fragment} from 'react';
import NavigationUtil from './NavigationUtil'
import {observer, inject} from 'mobx-react';
import {
  StyleSheet,
  View,
  Text,
} from 'react-native';
import HomePage from '../page/HomePage'
import RecordPage from '../page/RecordPage'
import StatisticsPage from '../page/StatisticsPage'
import MyPage from '../page/MyPage'

const TABS = {
  HomePage:{
    screen:HomePage,
    navigationOptions:{
        tabBarLabel:'首页',
        tabBarIcon:({ tintColor,focused }) => (
          <AntDesign
              name={'home'}
              size={24}
              style={{color:tintColor }}
          />
      )
    }
  },
  RecordPage:{
    screen:RecordPage,
    navigationOptions:{
      tabBarLabel:'记录',
      tabBarIcon:({ tintColor,focused }) => (
        <AntDesign
            name={'profile'}
            size={24}
            style={{color:tintColor }}
        />
      )
    }
  },
  StatisticsPage:{
    screen:StatisticsPage,
    navigationOptions:{
      tabBarLabel:'统计',
      tabBarIcon:({ tintColor,focused }) => (
        <AntDesign
            name={'dotchart'}
            size={24}
            style={{color:tintColor }}
        />
      )
    }
  },
  MyPage:{
    screen:MyPage,
    navigationOptions:{
       tabBarLabel:'我的',
      tabBarIcon:({ tintColor,focused }) => (
        <AntDesign
            name={'user'}
            size={24}
            style={{color:tintColor }}
        />
      )
    }
  }
}

export default class DynamicTabNavigator extends React.Component{
  constructor(props){
    super(props)
    console.disableYellowBox = true
  }
  _genTabNavigator(){
    if(this.Tabs){
      return this.Tabs
    }
    const {HomePage, RecordPage,StatisticsPage,MyPage} = TABS
    const tabs = {HomePage, RecordPage,StatisticsPage,MyPage}
    // tabs.RecordPage.navigationOptions.tabBarLabel="最热"
    const TabNav = createBottomTabNavigator(tabs,{
      tabBarComponent:props =>{
        return <TabBarComponent theme={this.props.theme} {...props} />
      },
      defaultNavigationOptions:{
        tabBarOptions:{
          // labelStyle:{
          //   fontSize:14
          // },
          
          activeBackgroundColor:'#eee',
          style :{
            borderTopColor:'#f0f0f0'
          }
        }
      }
    })
   return this.Tabs =  createAppContainer(TabNav)
  }
  render(){
    const Tab = this._genTabNavigator()
    return (
        <Tab/>
    )
  }
 
};

@inject('appStore')
@observer
class TabBarComponent extends React.Component{
  constructor(props){
    super(props)
    this.theme = {
      tintColor:props.activeTintColor,
      updateTime:new Date().getTime()
    }
    console.log(this.props)
  }

  render(){
    return (
        <BottomTabBar
          {...this.props}
          activeTintColor = {this.props.appStore.theme}
        />
    )
  }
}


const styles = StyleSheet.create({

  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color:'#333',
  },
 
});


// const mapStateToProps = state => ({
//   theme:state.theme.theme
// })
// export default connect(mapStateToProps)(DynamicTabNavigator)